<template>
	<view style="width: 100%; height: 100%; position: relative;">
		<!-- 个人信息 -->
		<view class="myinfo-box">
			<view class="first-row">
				<view class="id-style">ID 12345678</view>
				<!-- #ifdef MP-WEIXIN -->
				<view style="position: relative;">
					<image src="/static/icon/cart.png" class="icon-cart" @click="shiftCart" alt="icon"></image>
					<image src="/static/icon/setting.png" class="icon-style"
						style="position: absolute;left:-8rem;top: 0rem;" @click="shiftSetting" alt="icon"></image>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view style="position: relative;">
					<image src="/static/icon/cart.png" class="icon-cart2" @click="shiftCart" alt="icon"></image>
					<image src="/static/icon/setting.png" class="icon-style" @click="shiftSetting" alt="icon"></image>
				</view>
				<!-- #endif -->
			</view>

			<view class="second-row">
				<!-- 左边的图标 -->
				<view>
					<view class="icon-data">
						<image src="/static/icon/like.png" class="icon-style" alt="icon"></image>
						<view class="data-style">2.2k</view>
					</view>
					<view class="icon-data">
						<image src="/static/icon/collect.png" class="icon-style" alt="icon"></image>
						<view class="data-style">1.5w</view>
					</view>
					<view class="icon-data">
						<image src="/static/icon/shear.png" class="icon-style" alt="icon"></image>
						<view class="data-style">1.2k</view>
					</view>
				</view>
				<!-- 中间的头像 -->
				<view style="margin: 0.5rem 0 0 3.25rem;">
					<image src="/static/img/avatar.png" class="avatar-style" alt="avatar"></image>
					<view class="name-style">Baby Three</view>
				</view>
				<!-- 右边 -->
				<view class="right-style">
					<view class="right-style-row">
						<text style="font-size: 1rem;">20.5w</text>
						<text class="right-style-word">{{$t('mine.fans')}}</text>
					</view>
					<view>
						<text>3</text>
						<text class="right-style-word">{{$t('mine.follow')}}</text>
					</view>
				</view>
			</view>

			<view class="third-row">
				<image src="/static/icon/scan.png" class="icon-style" alt="icon" @click="scan"></image>
			</view>
		</view>
		<!-- tabs标签 -->
		<view class="tabs-container">
			<up-tabs :list="list" @click="click" :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
				:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }"
				itemStyle="height: 2rem; width:100%"
				style="background-color: #EAB3B8; border-radius: 0.63rem 0.63rem 0 0;" lineColor="#303133"
				lineWidth="60" />
			<view class="tabs-bottom"></view>
		</view>
		<!-- 可滚动区域 -->
		<scroll-view scroll-y class="scroll-box">
			<!-- 底部图片 -->
			<view v-show="tabsIndex === 0">
				<view style="position: relative; width: 100%; height: 10rem;">
					<image src="/static/img/fox.jpg" class="p1-style" style="transform: rotate(-10deg); left: 1rem;"
						alt="image"></image>
					<image src="/static/img/dog.jpg" class="p1-style"
						style="transform: rotate(6deg); left: 5.5rem; top: 2rem;" alt="image"></image>
					<image src="/static/img/ele.gif" class="p1-style"
						style="transform: rotate(1deg); left: 11.5rem; top: 0.5rem;" alt="image"></image>
				</view>
				<view style="position: relative; width: 100%;">
					<image src="/static/img/2.jpg" class="p2-style"
						style="transform: rotate(-10deg); left: 2rem; top: 2rem;" alt="image"></image>
					<image src="/static/img/1.jpg" class="p2-style"
						style="transform: rotate(-1deg); left: 8.6rem; top: 5rem;" alt="image"></image>
					<image src="/static/img/3.jpg" class="p2-style"
						style="transform: rotate(1deg); left: 5rem; top: 0.7rem;" alt="image"></image>
					<image src="/static/img/4.jpg" class="p2-style"
						style="transform: rotate(35deg); left: 13.2rem; top: 2.5rem;" alt="image"></image>
					<image src="/static/img/17.jpg" class="p2-style"
						style="transform: rotate(8deg); left: 5.3rem; top: 9.3rem;" alt="image"></image>
				</view>
				<view style="position: relative; width: 100%;">
					<image src="/static/img/18.jpg" class="p2-style"
						style="transform:rotate(60deg); top: 17rem; left: 15rem;">
					</image>
				</view>
			</view>
			<view v-show="tabsIndex === 1">
				2
			</view>
			<view v-show="tabsIndex === 2" style="width: 100%;">
				<view class="products-link">
					<likeCard :product="product" v-for="(product, index) in products" :key="index"
						style="min-width:calc(50% - 0.5rem);flex: 1;margin: 0.25rem;" />
				</view>
			</view>
			<view v-show="tabsIndex === 3">
				<view class="collect-folder">
					<collectFolder :product="products" v-for="item in 5"
					style="min-width:calc(100% - 15rem);margin: 0.25rem 0.5rem;"></collectFolder>
				</view>
				
			</view>
		</scroll-view>
		<CustomTabBar />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { Product } from '@/types/types'
	import likeCard from '@/components/linkCard.vue';
	import CustomTabBar from '@/components/CustomTabBar.vue';
	import collectFolder from './components/collectFolder.vue';
	type tabListItemType = {
		name : string
	}
	const { t } = useI18n()
	const tabsIndex = ref<number>(0)
	const list = ref<Array<tabListItemType>>([
		{ name: t('mine.tabs.item1') },
		{ name: t('mine.tabs.item2') },
		{ name: t('mine.tabs.item3') },
		{ name: t('mine.tabs.item4') },
	])
	const products = ref<Product[]>([
		{
			image: '/static/img/like1.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
		{
			image: '/static/img/like2.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
		{
			image: '/static/img/like1.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
		{
			image: '/static/img/like2.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
		{
			image: '/static/img/like1.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
		{
			image: '/static/img/like1.jpg',
			desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱',
			likes: 888,
			storeName: 'Baby Three'
		},
	])
	// 定义方法  
	function click(item : any) {
		// console.log('item', item);  
		tabsIndex.value = item.index
	}
	const shiftCart = () => {
		uni.navigateTo({
			url:'/pages/cart/cart'
		})
	}
	const shiftSetting = () => {
		uni.navigateTo({
			url: '/pages/setting/setting'
		})
	}
	//扫码
	const scan = () => {
		uni.scanCode({
			onlyFromCamera: false,
			scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
			autoDecodeCharset: true,
			success: function (res) {
				const result = res.result; // 扫描得到的结果字符串 或url
				
				// const scanType = res.scanType; // 扫描的类型（如 'QR_CODE'）
				uni.showToast({
					title: `扫描成功: ${result}`,
					icon: 'none'
				});
			},
			fail: function (err) {
				// 扫描失败后的处理逻辑
				console.error('扫描失败:', err);
				uni.showToast({
					title: '扫描失败，请重试',
					icon: 'none'
				});
			}
		})
	}
</script>

<style scoped lang="scss">
	.myinfo-box {
		width: 100%;
		background-image: url('/static/img/myBg.png');
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		box-sizing: border-box;
		/* 微信小程序专用样式 */
		/* #ifdef MP-WEIXIN */
		padding-top: 3.5rem;
		height: 16.38rem;
		/* #endif */

		/* 非微信小程序环境下的样式 */
		/* #ifndef MP-WEIXIN */
		padding-top: 1.5rem;
		height: 14.38rem;
		/* #endif */
	}

	.first-row {
		margin-right: 0.5rem;
		display: flex;
		justify-content: space-between;
	}

	.id-style {
		width: 8.38rem;
		height: 1.5rem;
		line-height: 1.5rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.88rem;
		text-align: center;
	}

	.icon-cart {
		position: absolute;
		width: 2.06rem;
		height: 2.06rem;
		left: -11rem;
		top: -0.3rem;
	}

	.icon-cart2 {
		position: absolute;
		width: 2.06rem;
		height: 2.06rem;
		left: -2.5rem;
		top: -0.2rem;
	}

	.icon-style {
		width: 1.5rem;
		height: 1.5rem;
	}

	.second-row {
		display: flex;
	}

	.icon-data {
		display: flex;
		margin: 0.5rem 0 1.5rem 1.3rem;
	}

	.data-style {
		width: 2.81rem;
		height: 1.25rem;
		line-height: 1.25rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.88rem;
		font-weight: 600;
		text-align: center;
	}

	.avatar-style {
		width: 6.25rem;
		height: 6.25rem;
	}

	.name-style {
		margin-left: 0.5rem;
		width: 5rem;
		height: 1.88rem;
		line-height: 1.88rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		font-weight: 600;
		text-align: center;
	}

	.right-style {
		margin: 2rem 0 0 1.5rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: right;
	}

	.right-style-row {
		margin-bottom: 1.4rem;
	}

	.right-style-word {
		margin-left: 0.5rem;
	}

	.third-row {
		position: absolute;
		right: 0.5rem;
	}

	.tabs-container {
		position: relative;
		z-index: 10;
	}

	.tabs-bottom {
		position: relative;
		top: -0.1rem;
		width: 100%;
		height: 1.94rem;
		z-index: 22;
		background: linear-gradient(180deg, rgba(234, 179, 184, 1) 0%, rgba(234, 179, 179, 0) 100%);
	}

	.scroll-box{
		position: absolute; 
		top: 16.58rem; 
		bottom: 0; 
		width: 100%;
		padding-bottom:1rem;
		box-sizing: border-box;
		
		/* #ifdef MP-WEIXIN*/
		top: 18.58rem; 
		/* #endif */
	}
	.p1-style {
		width: 6.38rem;
		height: 7.25rem;
		border-radius: 0.31rem;
		box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.p2-style {
		width: 4.31rem;
		height: 6.88rem;
		border-radius: 0.31rem;
		box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.products-link {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.collect-folder{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
</style>